feat(web): add Mantine clear buttons to text inputs app-wide (#1333)#1448
Conversation
Add a clear (×) affordance to every user-editable text input across the web client so a populated field can be reset in one click. - Autocomplete: enable `clearable` by default via the theme (`theme/Autocomplete.ts`) — covers the prompt-argument and resource-template variable autocomplete branches. - TextInput / Textarea: Mantine v8 does not expose a public `clearable` prop on these primitives (only the combobox-based components do), so add the clear button manually via `rightSection` + `CloseButton` (aria-label="Clear") shown only when the field has a value, wired to reset the field's controlled value to "". Applied to sidebar search inputs (prompts, tools, apps, tasks, history, resources, network, logs), prompt-argument and resource-template variable inputs, the sampling response/model fields, server config & settings forms, roots table, schema form, experimental features panel, and the server.json import panel. Read-only/display Textareas (OutputValidationModal, UrlElicitationErrorModal) are intentionally left untouched. Tests cover the clear behavior on representative inputs from each category (sidebar search, prompt argument, resource-template variable, sampling response, plus the config/settings forms). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@claude review |
|
Claude finished @cliffhall's task in 2m 1s —— View job Review: clear buttons for text inputs (#1448)Read the full diff against 1. Heavy duplication — extract a shared helper (main issue)The identical 8–10 line block is repeated ~24 times across 15 files: rightSectionPointerEvents="auto"
rightSection={
value ? (
<CloseButton onClick={reset} />
) : null
}This is most of the 789 added lines, and // src/components/elements/clearableInput.tsx
export function clearableProps(value: string, onClear: () => void, label = "Clear") {
return {
rightSectionPointerEvents: "auto" as const,
rightSection: value ? <CloseButton onClick={onClear} /> : null,
};
}Usage: 2. Clear button stays active while the input is
|
Address review #2 on #1448: the clear CloseButton sat in `rightSection` with `rightSectionPointerEvents="auto"`, so it stayed clickable even while the field was `disabled={submitting}`, letting a user wipe a field mid-submit. Forward `disabled={submitting}` to each clear button so it locks together with its input. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Thanks for the thorough review! Responses to each point: #2 — clear button clickable while #1 — extract a shared helper — declined (deliberate). The per-site inline approach was an explicit, up-front decision by the maintainer when scoping this work: the shared-helper and wrapper-component options were both considered and the inline option was chosen, knowing it's more repetitive. Keeping it as-is to honor that decision rather than reverse it in review. (Happy to revisit as a separate refactor if the team prefers.) #4 — generic #3 — focus restoration on clear — deferred. Agreed it's a nice touch, but doing it across ~24 inline sites needs a ref per input, which pulls against the inline approach above; and since there was no clear button before, this isn't a regression. Noting it as a potential follow-up. #5 — clear button vertically centered on tall
|
|
@claude review |
|
Claude finished @cliffhall's task in 1m 35s —— View job Re-review: clear buttons for text inputs (#1448)
Re-reviewed #2 (correctness) — fix confirmed ✅All six #1 / #3 / #4 / #5 — accept the maintainer's calls
Spot checks
No remaining blocking issues from me — the one correctness nit is resolved and the deferred items are reasonable, well-justified follow-ups. (I can't formally approve, but this LGTM.) |
The sampling modal pre-loads its draft with the default stub result, and "Send Response" sends that draft — so on an untouched form "Auto-respond" did exactly the same thing as "Send Response", just with a fresh copy of the same defaults. Drop the redundant button and its `onAutoRespond` prop; "Send Response" now covers both the unedited (stub) and edited cases. The InlineSamplingRequest variant keeps its Auto-respond button — there it is the quick path versus "Edit & Send" (which opens this editable modal), not a duplicate of an adjacent send action. Updated PendingClientRequestModal wiring, stories, and tests accordingly. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
@claude review — new commit |
|
Claude finished @cliffhall's task in 2m 0s —— View job Re-review: remove redundant Auto-respond from
|
1 participant
Summary
Closes #1333. Adds a clear (×) affordance to every user-editable text input across the web client so a populated field can be reset in a single click instead of select-all + delete.
Key finding
The issue proposed setting
clearable: trueas an app-wide theme default. In Mantine v8 (8.3.17) that only works for the combobox-based components (Autocomplete,Select, …) — plainTextInputandTextareado not expose a publicclearableprop (only the internal__clearable). So:Autocomplete→clearableenabled by default viatheme/Autocomplete.ts(firesonChange(""), which also collapses the dropdown). Covers the prompt-argument and resource-template autocomplete branches.TextInput/Textarea→ clear button added per-site viarightSection+CloseButton(aria-label="Clear",rightSectionPointerEvents="auto"), rendered only when the field has a value and wired to reset the controlled value to"". This matches the "Left and right sections" pattern the issue's own Mantine link demonstrates.A generic
aria-label="Clear"is used (rather than field-specific labels) to match Mantine's own clear button and to avoid colliding with the many regex-basedgetByLabelTextqueries in the test suite.Surfaces covered
Sidebar search (prompts, tools, apps, tasks, history, resources, network, logs), prompt-argument & resource-template variable inputs, sampling response/model fields, server config & settings forms, roots table, schema form, experimental features panel, and the server.json import panel.
Read-only/display Textareas (
OutputValidationModal,UrlElicitationErrorModal) are intentionally left untouched.Tests
Added clear-behavior unit tests on representative inputs from each category (sidebar search, prompt argument, resource-template variable, sampling response) plus the config/settings forms to keep per-file coverage ≥ 90%.
npm run validate✅npm run test:integration✅npm run test:storybook✅🤖 Generated with Claude Code